<template>
	<view class="service-content">
		<view class="s-item">
			<view class="service-title">
				<text>公共服务</text>
			</view>
			<view class="service-content-items">
				<view class="common-service-items s-block service-bgc5" @click="toPage(1)">
					<view class ="service-text">
						<p class="service-text-item1">一键求助</p>
						<p class="service-text-item2">应急救援</p>
					</view>
					<view class="service-icon">
						<image src="../../static/icon/service-icon/service-help.png" mode=""></image>
					</view>
				</view>
				<view class="common-service-items s-block service-bgc2" @click="toPage(2)">
					<view class ="service-text">
						<p class="service-text-item1">失物招领</p>
						<p class="service-text-item2">查看失物，上传失物</p>
					</view>
					<view class="service-icon">
						<image src="../../static/icon/service-icon/service-swu.png" mode=""></image>
					</view>
				</view>
				<view class="common-service-items s-block service-bgc4" @click="toPage(3)">
					<view class ="service-text">
						<p class="service-text-item1">意见反馈</p>
						<p class="service-text-item2">有问必答</p>
					</view>
					<view class="service-icon">
						<image src="../../static/icon/service-icon/service-yijian.png" mode=""></image>
					</view>
				</view>
			</view>
		</view>
		
		
		<view class="s-item">
			<view class="service-title">
				<text>查询服务</text>
			</view>
			<view class="service-content-items">
				<view class="common-service-items s-block service-bgc4" @click="toPage(4)">
					<view class ="service-text">
						<p class="service-text-item1">攻略</p>
						<p class="service-text-item2">游玩宝典</p>
					</view>
					<view class="service-icon">
						<image src="../../static/icon/service-icon/service-gonglv.png" mode=""></image>
					</view>
				</view>
				<view class="common-service-items s-block service-bgc3" @click="toPage(5)">
					<view class ="service-text">
						<p class="service-text-item1">线路</p>
						<p class="service-text-item2">推荐路程</p>
					</view>
					<view class="service-icon">
						<image src="../../static/icon/service-icon/service-xianlu.png" mode=""></image>
					</view>
				</view>
				<view class="common-service-items s-block service-bgc3" @click="toPage(6)">
					<view class ="service-text">
						<p class="service-text-item1">美食</p>
						<p class="service-text-item2">当地特色</p>
					</view>
					<view class="service-icon">
						<image src="../../static/icon/service-icon/service-food.png" mode=""></image>
					</view>
				</view>
				<view class="common-service-items s-block service-bgc5" @click="toPage(7)">
					<view class ="service-text">
						<p class="service-text-item1">文创</p>
						<p class="service-text-item2">留个纪念吧</p>
					</view>
					<view class="service-icon">
						<image src="../../static/icon/service-icon/service-wenchuang.png" mode=""></image>
					</view>
				</view>
			</view>
		</view>
		
		<view class="s-item">
			<view class="service-title">
				<text>导览服务</text>
			</view>
			<view class="service-content-items">
				<view class="common-service-items s-block service-bgc6" @click="toPage(8)">
					<view class ="service-text">
						<p class="service-text-item1">智能导览</p>
						<p class="service-text-item2">快速预览</p>
					</view>
					<view class="service-icon">
						<image src="../../static/icon/service-icon/service-route.png" mode=""></image>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			toPage(id){
				if(id==1){
					uni.navigateTo({
						url:"/pages/seekhelp/seekhelp"
					})
				}
				else if(id==2){
					uni.navigateTo({
						url:'/pages/lost/lost'
					})
				}
				else if(id==3){
					uni.navigateTo({
						url:'/pages/feedback/feedback'
					})
				}
				else if(id==4){
					uni.navigateTo({
						url:"/pages/strategy-list/strategy-list"
					})
				}
				else if(id==5){
					uni.navigateTo({
						url:"/pages/travel-route/travel-route"
					})
				}
				else if(id==6){
					uni.navigateTo({
						url:"/pages/listoffood/listoffood"
					})
				}
				else if(id==7){
					uni.navigateTo({
						url:"/pages/shop/shop"
					})
				}
				else if(id==8){
					uni.switchTab({
						url:"/pages/guide/guide"
					})
				}
				
				
			}
		}
	}
</script>

<style scoped>
.service-content {
	padding: 0 0;
	margin: 0 0;
}
.s-block {
	width: 45%;
	height: 150rpx;
	background-color: #f1f1f1;
	margin-top: 24rpx;
	margin-left: 24rpx;
	border-radius: 10rpx;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.s-item {
	margin-top: 50rpx;
}
.service-title {
	margin-left: 24rpx;
}
.service-content-items{
	display:flex;
	flex-wrap: wrap;
}
.service-text {
	width: 250rpx;
	margin-left: 25rpx;
}
.service-text p:nth-child(2){
	font-size: 20rpx;
	color: gray;
	margin-top: 10rpx;
}
.service-bgc5 {
	background-color: #fef5db;
}
.service-bgc6 {
	background-color: #fed8b8;
}
.service-bgc1 {
	background-color: #ffe5e0;
}
.service-bgc2 {
	background-color: #c9fcfe;
}
.service-bgc3 {
	background-color: #d4f9ea;
}
.service-bgc4 {
	background-color: #ecedfe;
}
.service-icon image {
	margin-right: 20rpx;
	width: 80rpx;
	height: 80rpx;
}
</style>
